<template>
  <view class="content">
    <view class="header"><text>登录</text> </view>
    <view class="form-content">
      <u-form :model="form" ref="loginForm">
        <u-form-item label="用户名" label-position="top" prop="userName"
          ><u-input v-model="form.userName" border :clearable="false"
        /></u-form-item>
        <u-form-item label="密码" label-position="top" prop="password"
          ><u-input
            v-model="form.password"
            border
            :clearable="false"
            type="password"
        /></u-form-item>
      </u-form>
      <text style="float: right; color: red">忘记密码？</text>
      <view>
        <u-button type="primary" @click="login">立即登录</u-button>
        <view class="btn" @click="toRegister">立即注册</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from '@vue/composition-api';
import PAGE from '@/const/page';
import { IForm, IFormRules } from '@/@types/common';

export default defineComponent({
  onReady() {
    (this.$refs.loginForm as IForm).setRules(this.rules as IFormRules);
  },
  setup() {
    const state = reactive({
      form: {
        userName: '',
        password: '',
      },
    });

    const rules = {
      userName: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 16,
          message: '用户名长度为3-16',
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        {
          min: 6,
          max: 16,
          message: '密码长度为6-16',
          trigger: 'blur',
        },
      ],
    };
    return {
      ...toRefs(state),
      rules,
    };
  },
  methods: {
    login() {
      (this.$refs.loginForm as IForm).validate((valid: any) => {
        if (valid) {
          if (
            this.form.userName === 'admin' &&
            this.form.password === '123456'
          ) {
            uni.showToast({
              title: '登录成功',
              icon: 'none',
              duration: 1500,
            });
            uni.switchTab({
              url: PAGE.HOME_INDEX.PATH,
            });
          } else {
            uni.showToast({
              title: '输入的用户名密码有误',
              icon: 'none',
              duration: 1500,
            });
          }
        }
      });
    },
    toRegister() {
      uni.navigateTo({
        url: PAGE.REGISTER.PATH,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.content {
  .header {
    width: 100%;
    height: 300rpx;
    background-image: url('@/static/images/chooseSeat.png');
    background-size: cover;

    text {
      display: block;
      font-size: 64rpx;
      font-weight: 700;
      margin-left: 40rpx;
      color: #fff;
      line-height: 300rpx;
      letter-spacing: 0.215rem;
    }
  }

  .form-content {
    width: 100%;
    padding: 40rpx;

    ::v-deep .u-input {
      height: 90rpx;
      line-height: 90rpx;
    }

    ::v-deep .u-input__input {
      height: 100%;
    }

    ::v-deep .u-form-item {
      line-height: 20px;
    }

    ::v-deep .u-form-item__message {
      padding: 0;
      font-size: 12px;
    }

    ::v-deep .u-btn {
      width: 100%;
      height: 90rpx;
      margin-top: 60rpx;
    }

    ::v-deep .u-border-bottom:after {
      border-bottom-width: 0px;
    }

    .btn {
      width: 100%;
      height: 90rpx;
      color: $u-type-primary;
      line-height: 90rpx;
      text-align: center;
    }
  }
}
</style>
